<template>
    <div id="loan_details">
      <div class="loanList">
        <flexbox>
            <flexbox-item :span="2">
                <div class="flex-demo flex-img">
                    <img :src="item.logoUrl" />
                </div>
            </flexbox-item>
            <flexbox-item>
                <div class="flex-demo flex_text">
                    <h2>{{item.partnerName}}</h2>
                    <p><span v-for="(l, index) in tagItem" :key="index">{{l}}</span></p>
                    <p>最高额度<span>{{item.maxAmount | maxprice}}</span>元，<span>{{item.minLoanTime}}</span>放款<span class="loanPeople" v-if="item.applyCnt">，<span>{{item.applyCnt | maxprice}}人</span>已申请</span></p>
                </div>
            </flexbox-item>
        </flexbox>
      </div>
      <div class="circle"></div>
      <div>
        <div class="detail_loan">
          <card >
            <div slot="content" class="card-demo-flex card-demo-content01">
                <div class="vux-1px-l vux-1px-r">
                    <span>{{item.maxAmount | maxprice}}</span>
                    <br/>
                    最高额度
                </div>
                <div class="long_line"></div>
                <div class="vux-1px-r" >
                    <span>{{item.minLoanTime}}</span>
                    <br/>
                    最快放贷时间
                </div>
                <div class="long_line" ></div>
                <div class="vux-1px-r" >
                    <span>{{item.rate}}</span>
                    <br/>
                    <span class="rate_name">{{item.rateType | rateName}}</span>低至
                </div>
              </div>
            </card>
          </div>
          <div class="circle"></div>
          <div class="product_tab">申请流程</div>
          <div class="product_flow"><img :src="item.processUrl"/></div>
          <div class="circle"></div>
          <div class="product_tab">所需材料</div>
          <div class="product_flow" v-html="item.attr2"></div>
          <div class="circle"></div>
          <div class="product_tab">常见问题</div>
          <div class="product_flow product_introduce" v-html="item.attr3"></div> 
      </div>
      <slot name="loanBtn"></slot>
    </div>
</template>
<script>
import { Flexbox, FlexboxItem, Card } from 'vux'
export default {
  props: ['item', 'tagItem'],
  data () {
    return {
    }
  },
  filters: {
    rateName (val) {
      if (val === 1) {
        return '月利率'
      } else if (val === 0) {
        return '日利率'
      }
    }
  },
  components: {
    Flexbox,
    FlexboxItem,
    Card
  }
}
</script>
